<template>
  <div>
    <n-card title="志愿者信息">
      <n-form :model="formValue" label-placement="left" label-width="120">
        <n-form-item label="真实姓名">
          <n-input v-model:value="formValue.realName" />
        </n-form-item>
        <n-form-item label="性别">
          <n-radio-group v-model:value="formValue.gender">
            <n-radio :value="1">男</n-radio>
            <n-radio :value="0">女</n-radio>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="年龄">
          <n-input-number v-model:value="formValue.age" :min="1" :max="120" />
        </n-form-item>
        <n-form-item label="身份证号">
          <n-input v-model:value="formValue.idCard" />
        </n-form-item>
        <n-form-item label="地址">
          <n-input v-model:value="formValue.address" />
        </n-form-item>
        <n-form-item label="技能特长">
          <n-input
            v-model:value="formValue.skills"
            type="textarea"
            placeholder="如：编程、摄影、急救知识等"
            :rows="3"
          />
        </n-form-item>
        <n-form-item label="可服务时间">
          <n-input
            v-model:value="formValue.availableTime"
            placeholder="如：周末及节假日"
          />
        </n-form-item>
        <n-form-item label="累计服务时长">
          <n-input-number v-model:value="formValue.totalHours" disabled suffix="小时" />
        </n-form-item>
        <n-form-item label="累计积分">
          <n-input-number v-model:value="formValue.totalPoints" disabled />
        </n-form-item>
        <n-form-item>
          <n-button type="primary" @click="saveInfo">保存</n-button>
        </n-form-item>
      </n-form>
    </n-card>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getVolunteerProfile, updateVolunteerProfile } from '@/api/user'

const userStore = useUserStore()

const formValue = reactive({
  realName: '',
  gender: 1,
  age: null,
  idCard: '',
  address: '',
  skills: '',
  availableTime: '',
  totalHours: 0,
  totalPoints: 0
})

const loadProfile = async () => {
  try {
    const res = await getVolunteerProfile(userStore.userId)
    if (res.data) {
      Object.assign(formValue, res.data)
    }
  } catch (error) {
    console.error('加载志愿者信息失败:', error)
  }
}

const saveInfo = async () => {
  try {
    await updateVolunteerProfile(userStore.userId, formValue)
    window.$message?.success('保存成功')
  } catch (error) {
    console.error('保存志愿者信息失败:', error)
  }
}

onMounted(() => {
  loadProfile()
})
</script>

